/*
  商品参数
*/
<template>
  <div class="goodsspecs">
    <div class="head ">
      <div class="guanDef">
        <p>产品库：<el-select v-model="value" filterable placeholder="请选择" class='please'>
          <el-option v-for="item in optDef" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select></p>
        <p class='addProDef'>
          <span>添加产品参数</span>
          <span @click="batchAdd()" style="width:100px;">批量添加</span>
        </p>
      </div>
      <div class="goodCon">
        <div class="goodContent">
        <el-table :data="tableData" row-key="id" height="70vh" :row-class-name="tableRowClassName" :header-cell-style="{'color':'#3D3D3D','font-size':'20px','height':'60px','font-weight':'400','background-color':'#F8F9FB','border-bottom':'none'}">
          <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label">
          </el-table-column>
          <el-table-column label="启用" main-width="16%" align="center" property="value">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.is_show" active-color="#13ce66" :active-value="1" :inactive-value="0" inactive-color="#C1C1C1"></el-switch>
          </template>
        </el-table-column>
          <el-table-column prop="number" label="排序（可拖动）" main-width="16%" align="center">
          <p class="drag">
            <img src="../../assets/img/xia.png" alt="">
            <img src="../../assets/img/shang.png" alt="">
          </p>
        </el-table-column>
        <el-table-column label="操作" main-width="16%" align="center">
          <template slot-scope="scope">
            <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="handleEdits(scope.$index, scope.row)">编辑</el-button> 
            <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
            <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="Management (scope.$index, scope.row)">管理值</el-button>
          </template>
        </el-table-column>
      </el-table>
        </div>
      </div>
      <!-- <p class="total">总共5个</p>
      <div class="btn">
        <p class="preservation">确定</p>
        <p class='cancel'>取消</p>
      </div> -->
      <div class="paging">
        <div class="pagiton">
          <p class="remarks">共 <span> {{pagesize}} </span>条当前为第 <span> {{currentPage}} </span>页</p>
          <button class="btn-default" type="submit" @click="prePage"><i class="el-icon-caret-left"></i></button>
          <button class=" btn-defaults" type="submit">{{current_page}}</button>
          <button class=" btn-default" type="submit" @click="nextPage" :class="{'disabled':disableds}"><i class="el-icon-caret-right"></i></button>
        </div>
      </div>
    </div>
     <!-- 批量添加弹框 -->
    <el-dialog :visible.sync="batchAddNum" width="380px" >
      <span class="nav">批量添加</span>
      <div class="navBox">
        输入参数值，每行一个
      </div>
      <span slot="footer" class="shopFooter">
        <el-button @click="submitForms('formLable')"  style="width:100%;padding:0.75rem 0;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:5px;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog :visible.sync="paramBox" width="380px" >
      <span class="nav">编辑产品参数</span>
      <div class="navBox">
        <el-form label-width="100px" :model="formLable"><!-- :model="formList"表单数据对象 -->
          <el-form-item label="参数名称：">
            <el-input placeholder="请输入名称" v-model="formLable.name" maxlength="15" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="shopFooter">
        <el-button @click="subianForms('formLable')"  style="width:100%;padding:0.75rem 0;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:5px;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑值弹框 -->
    <el-dialog :visible.sync="paramBianNum" width="380px" style="margin-top:120px">
      <span class="nav">编辑值</span>
      <div class="navBox">
        <el-form label-width="100px" :model="formLableNum" ><!-- :model="formList"表单数据对象 -->
          <el-form-item label="参数值：">
            <el-input placeholder="请输入名称" v-model="formLableNum.name"  maxlength="5" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="shopFooter">
        <el-button @click="submitForms('formLableNum')"  style="width:100%;padding:0.75rem 0;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:5px;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 管理参数值弹框 -->
    <el-dialog :visible.sync="paramNum" width="45%" >
      <span class="nav">管理参数值</span>
      <div class="navBox">
        <p class="paraColor">参数项名称：  颜色</p>
        <p class="paramNum">
          <span class="addNum">添加值</span>
          <span class="delNum">删除值</span>
        </p>
      </div>
      <el-table :data="paramData" size="small" v-loading="loading" element-loading-text="拼命加载中" style="width:100%;" :header-cell-style="{'color':'#3D3D3D','font-size':'22px','height':'66px','font-weight':'400','background-color':'#fff','border-bottom':'none'}" class="customer-table">
        <el-table-column  prop="id" label="参数值" width="200%" align="center">
        </el-table-column>
        <el-table-column prop="number" label="排序（可拖动）" main-width="16%" align="center">
          <p class="drag">
            <img src="../../assets/img/xia.png" alt="">
            <img src="../../assets/img/shang.png" alt="">
          </p>
        </el-table-column>
        <el-table-column label="操作" main-width="16%" align="center">
          <template slot-scope="scope">
            <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="handleEdites(scope.$index, scope.row)">编辑</el-button> 
            <el-button type="text" style="font-size:0.875rem;color:#436AF2" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div style="width:50%;margin:2.5rem auto;display:flex;justify-content: space-around">
        <el-button @click="submitForm()" style="width:120px;height:45px;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:10px;">确定</el-button>
        <el-button @click="newcommodity" style="width:120px;height:45px;font-size:0.875rem;border-radius:10px;">取消</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>
<script>
    import Sortable from 'sortablejs';
export default {
  data(){
    return{
      disableds:false,
      col:[{label: '参数项名称',  prop: 'attr_name' }],
      dropCol:[{label:'参数项名称',  prop:'attr_name' }],
      tableData: [],
        currentPage: 1, //当前页号
        pagesize:20, //每页大小
      value:'',
      is_show:'',
      optDef: [{
          value: '选项1',
          label: '默认产品库'
        }, {
          value: '选项2',
          label: '黄金会员级以上'
        }],
        paramData:[
          {id: '1'},{id: '1'},
        ],
        loading:false,
        paramBox:false,
        paramBianNum:false,
        paramNum:false,
        batchAddNum:false,
        formLable:{
            name:''
          },
        formLableNum:{
          name:''
        },
    }
  },
  mounted () {
    this.roeDrop();
        },
  created(){
    this.shopParam()
  },
  computed: {
    page_arrs() {
      let { currentPage, pagesize } = this;
      return this.tableData.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    current_page() {
      return this.currentPage;
    }
  },
  methods:{
  //商品参数列表
  shopParam(){
     this.loading-true
      this.$axios({
        method: 'post',
        url:'goods/goods_attribute_list',
        params:{
          p:this.currentPage,
          size:this.pagesize
        }
      }).then(res=>{
        let data = res.data.data;
        if(data.length<20){
          this.disableds=true
        }else{
          this.disableds=false
          this.tableData=data
        }
        // this.tableData=res.data.data
        // console.log(res,'商品参数列表')
      })
  },
  //分页
    prePage() {
      if (this.currentPage == 1){
        return;
      }
      this.currentPage = this.currentPage - 1;
      this.shopParam()
    },
    nextPage() {
      if (this.currentPage == Math.ceil(this.tableData.length)) {
        return;
      }
      this.currentPage = this.currentPage + 1;
      this.shopParam()
    },
  //删除
  deleteUser(index,row){
    this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
          this.$axios({
            method: 'post',
            url:'goods/del_goods_attribute',
            params:{
                id:row.attr_id
                }
          })
          .then((res)=>{
            if(res.status){
             this.shopParam()
              this.$message({
                type:"success",
                message:"删除成功"
              })
            }
          })
          
        })
      .catch(err => {
        this.loading = false
        this.$message({
          type:"error",
          message:err
        })
      })
  },
  //隔行换色
  tableRowClassName({row, rowIndex}) {
    if (rowIndex % 2 === 1) {
    return 'warning-row';
    } else{
    return 'success-row';
    }
  },
  roeDrop(){
    let that = this;
    // 首先获取需要拖拽的dom节点
    const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0];
    Sortable.create(el1, {
        disabled: false, // 是否开启拖拽
        ghostClass: 'sortable-ghost', //拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        group: { // 是否开启跨表拖拽
            pull: false,
            put: false
        },
        onEnd: (e) => { // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
        }
    })
  },
     //显示编辑界面
    handleEdits: function(index, row) {
      this.paramBox=true
      this.formLable.name=row.attr_name
      this.id=row.attr_id
    },
    //编辑确定
    subianForms(){
       this.$axios({
        method: 'post',
        url:'goods/save_goods_attribute',
        params:{
          id:this.id,
          attr_name:this.formLable.name
            }
      }).then(res=>{
        console.log(res,'编辑确定')
        this.paramBox=false
        this.shopParam()
      })
    },
    // 编辑值
    handleEdites(){
      this.paramBianNum=true
    },
    // 管理值
    Management(){
      this.paramNum=true
    },
    // 取消
    newcommodity(){
      this.paramNum=false
    },
    // 批量添加
    batchAdd(){
      this.batchAddNum=true
    }
  }
}
</script>
<style scoped>
/* 分页 */
.pagiton{text-align: center;padding-bottom:10px;}
.pagiton .btn-defaults{background-color: #436AF2;border-radius: 5px;font-size:0.875rem;color:#fff;border:1px solid #436AF2;height:28px;width:28px;line-height:28px;margin:0 10px;}
.pagiton .btn-default{background-color: #fff;border:1px solid #F7F7F7;color:#C1C1C1;height:28px;width:32px;line-height:28px;font-size:0.875rem;}
.pagiton .remarks{margin:10px 0;color:#ABABAB;font-size:0.875rem;}
.disabled{
	/* 鼠标会显示不可点 */
	cursor:not-allowed;
	/* 会阻止事件 */
	pointer-events: none;  
}


/deep/ .el-table .cell{text-align: center;}
/deep/ .el-table th.el-table__cell>.cell{color: #333;}
/deep/ .el-table td.el-table__cell div{color: #4D4D4D;}

.head{background-color: #fff;height: 92vh;}
.guanDef{display: flex;justify-content: space-between;width: 96%;margin-left: 2%;align-items: center;font-size:14px}
.guanDef .addProDef{width: 15.5%;display: flex;justify-content: space-between;}
.guanDef .addProDef span{width:120px;border: 1px solid #6584F4;text-align: center;height:38px;line-height:38px;cursor: pointer;background: #436AF2;color: #fff;display: inline-block;border-radius: 5px;}
.goodCon{width: 96%;margin-left: 2%;margin-top: 0.875rem;}
/* .goodContent{border: 1px solid green;} */
.drag img{width:5%;}
.btn{clear: both;width:30%;margin:0 auto;display: flex;justify-content: space-around;}
.btn p{width: 35%;text-align: center;padding:0.8rem 0;border-radius:5px;cursor: pointer;}
.btn  .preservation{background: #436AF2;color: #fff;}
.btn  .cancel{border: 1px solid #E5E4E4;color: #7F7F7F;background-color: #fff;}
.total{font-size: 0.95rem;margin-left:3%;color: #000;}
/deep/ .please .el-input__inner{width: 100%;border: 1px solid #E7E6E6;}
/* 弹框 */
.nav{font-size: 1.125rem;color: #3D3D3D;font-weight: bold;line-height: 60px;}
/deep/ .el-input__inner {border-radius:0; border: 1px solid #EEEEEE;}
.navBox{margin-top: 0.875rem;margin-bottom: 0.875rem;}
.shopFooter{text-align: center;display: inline-block;width: 110px;margin:1.7rem 0;margin-right: 35%;}
/deep/ .el-dialog{border-radius: 8px;}
.paraColor{font-size: 0.875rem;}
.paramNum{font-size: 0.875rem;color: #333333;text-align: right;}
.paramNum span{display: inline-block;border: 1px solid #E7E6E6;padding: 0.7rem 4%;}
.paramNum .delNum{margin-left: 2%;}
/deep/ .el-table .warning-row {
  background: #F8F9FB !important;
}

/deep/ .el-table .success-row {
  background: white !important;
}
/deep/ .el-table .el-table__cell{padding:3px 0;}
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{border-bottom:none;}
/deep/ .el-table td.el-table__cell div{font-size:0.875rem}
/deep/ .el-table th.el-table__cell>.cell{font-size:15px;}

</style>